<!--  -->
<template>
  <div>
    <van-row class="title-search" type="flex" justify="space-between">
      <van-col span="20">
        <van-field
          class="search-div"
          v-model="input_value"
          @input="inputValFn"
          placeholder="好货内部价"
          @keyup.enter="submitFn"
        >
          <!-- 搜索框放大镜 icon -->
          <template v-slot:left-icon>
            <van-icon name="search" class="searchIconLeft" />
          </template>
          <!-- 清空搜索框 -->
          <template #button>
            <van-icon v-show="isCloseShow" name="close" @click="clear_search" />
          </template>
        </van-field>
      </van-col>
      <van-col span="3">
        <van-button class="cancelBtn" size="mini">取消</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      input_value: '',
      isCloseShow: false
    };
  },
  created() {},
  watch: {
    //   监听搜索框的值
    input_value(newVal) {
      if (newVal === '') {
        this.isCloseShow = false;
      } else {
        this.isCloseShow = true;
      }
    }
  },
  methods: {
    // watch监听input有没有值
    inputValFn(value) {
      this.input_value = value;
    },
    clear_search() {
      this.input_value = '';
      this.isCloseShow = false;
    },
    submitFn() {
      axios
        .get('http://localhost:3344/search', {
          params: { search_key: this.input_v }
        })
        .then((res) => {
          console.log(res.data);
        });
    }
  }
};
</script>

<style lang='less' scoped>
.title-search {
  padding: 0.2rem 0.4rem;
  > * {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-div {
    border: 0;
    background-color: #f4f4f4;
    height: 0.74667rem;
    line-height: 0.45rem;
    border-radius: 4px;
    font-size: 0.37333rem;
    margin-left: 0.2rem;
    .searchIconLeft {
      font-size: 0.5rem;
      margin-right: 0.2rem;
    }
  }
  .cancelBtn {
    width: 0.98667rem;
    height: 0.53333rem;
    line-height: 0.53333rem;
    text-align: center;
    color: #333;
    border: 0;
    border-radius: 0.10667rem;
    // margin-left: 0.21333rem;
    font-size: 0.32rem;
  }
}
</style>
